<template>
  <div id="app">
    <div class="title">
      <div class="title-1">我的填写情况</div>
      <div class="title-2">
        <div></div>
        <div class="title-3">截至日期：{{ time ? time : '' }}</div>
        <div></div>
      </div>
      <!-- <div class="zjy-search">
        <van-icon size="9vw" @click="drawer = true" name="search" />
      </div> -->
    </div>
    <el-drawer v-model="drawer" title="筛选条件" size="70%">
      <el-form :model="form" label-position="top">
        <el-form-item class="zjy-form-item" label="周数">
          <el-select v-model="formValue.weeks" placeholder="请选择周数">
            <el-option
              v-for="item in selectoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="zjy-form-item" label="姓名">
          <el-input v-model="formValue.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item class="zjy-form-item">
          <el-button type="primary" @click="handleValidateClick">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-table
      class="table"
      empty-text="暂无数据"
      height="92vh"
      :data="data"
      style="width: 100%"
      stripe
      border
      show-summary
      sum-text="合计"
      @cell-click="cellClick"
      :summary-method="summaryMethod"
    >
      <el-table-column label="序号" type="index" width="50" fixed align="center"></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.key"
        align="center"
        :fixed="item.fixed"
        :label="item.title"
        :render-header="renderheader"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import {
  saleManagerReport,
  yb51Satement_weeksList,
  yb51Satement_getWeekByDate
} from '@/request/api.js'
onBeforeMount(() => {
  agentcode.value = route.query.agentcode
  role.value = route.query.role //role=1分公司督训    role=2中支督训
  getweeksList()
})
onMounted(() => {})

const agentcode = ref('')
const role = ref('')

const formValue = ref({
  weeks: '',
  branch: '',
  name: ''
})

function handleValidateClick(e) {
  getdirectorSatement()
}
// 表头换行
function renderheader({ column, $index }) {
  return h('span', {}, [
    h('span', {}, column.label.split('|')[0]),
    h('br'),
    h('span', {}, column.label.split('|')[1])
  ])
}

/**
 * 工号
 * 姓名
 * 中支
 * 职级
 * 日辅导
 * 周维护
 * 周外训
 * 月微沙
 * 月大单
 */
// @Data
// @Accessors(chain = true)
// public class SaleManagerReport {
// 	private String agentcode;
// 	private String name;
// 	private String branch;
// 	private String role;
// 	private int tutoring;
// 	private int preserve;
// 	private int training;
// 	private int salon;
// 	private int largeorder;
// }

const columns = ref([
  {
    title: '姓名',
    key: 'name',
    fixed: true
  },
  {
    title: '工号',
    key: 'agentcode'
  },
  {
    title: '中支',
    key: 'branch',
    sorter: 'default'
  },
  {
    title: '职级',
    key: 'rank',
    sorter: 'default'
  },
  {
    title: '日辅导',
    key: 'tutoring',
    sorter: 'default'
  },
  {
    title: '周维护',
    key: 'preserve',
    sorter: 'default'
  },
  {
    title: '周外训',
    key: 'training',
    sorter: 'default'
  },
  {
    title: '月微沙',
    key: 'salon',
    sorter: 'default'
  },
  {
    title: '月大单',
    key: 'largeorder',
    sorter: 'default'
  }
])
const data = ref([])

const drawer = ref(false)
const time = ref('')
//获取客户经理报表（以客户经理为单位）
function getdirectorSatement() {
  showPageLoading()
  saleManagerReport({
    agentcode: agentcode.value
  }).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      data.value = [r.data]
      time.value = parseTime(new Date(), '{y}-{m}-{d}')
      drawer.value = false
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
let selectoptions = ref([])
//周数列表
function getweeksList() {
  let formdata = new FormData()
  yb51Satement_weeksList(formdata).then((r) => {
    if (r.status == 200) {
      selectoptions.value = r.data.map((item) => {
        return {
          label: item,
          value: item
        }
      })
      getWeekByDate()
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}

//根据日期获取周数
function getWeekByDate() {
  let formdata = new FormData()
  formdata.append('date', dayjs(new Date()).format('YYYY-MM-DD'))
  yb51Satement_getWeekByDate(formdata).then((r) => {
    if (r.status == 200) {
      formValue.value.weeks = r.data
      console.log('根据日期获取周数')
      console.log(r)
      getdirectorSatement()
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
// 表底合计
function summaryMethod(param) {
  const { columns, data } = param
  const sums = []
  let signCount = 0 // 到场|客户数
  columns.forEach((column, index) => {
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      const sumsIndex = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
      sums[index] = sumsIndex
      if (column.property === 'signCount') {
        signCount = sumsIndex
      }
      agentcode
    } else {
      sums[index] = ''
    }
    if (column.property === 'agentcode') {
      sums[index] = ''
      return
    }
    // 第一列，合计行
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['合计'])
      return
    }
  })
  return sums
}
function cellClick(row, column) {
  // if (['序号', '机构', '部经理', '客户经理'].includes(column.label)) {
  //   return
  // }
  // let href
  // switch (column.label) {
  //   case '日走访':
  //     href = 'directorStatement_DailyList'
  //     break
  //   case '周维护':
  //     href = 'directorStatement_WeeklyPreserveRecordList'
  //     break
  //   case '月项目':
  //     href = 'directorStatement_MonthProjectList'
  //     break
  //   case '支行月报告':
  //     href = 'directorStatement_MonthlyReportList'
  //     break
  //   case '月计划':
  //     href = 'directorStatement_MonthlyPlanList'
  //     break
  //   case '季启动':
  //     href = 'directorStatement_SeasonalStartList'
  //     break
  //   default:
  //     break
  // }
  // router.push({
  //   path: href,
  //   query: {
  //     agentcode: row.agentcode,
  //     weeks: formValue.value.weeks
  //   }
  // })
}
</script>
<style lang="less" scoped>
@import '@css/table.less';
</style>
